<template>
  <div class="search-container">
    <div class="blank"></div>
    <!-- 搜索栏 -->
    <form action="/">
      <van-search
        v-model="keywords"
        show-action
        background="#3296fa"
        placeholder="请输入搜索关键词"
        @cancel="onCancel"
        @search="onSearch()"
        @focus="isresultshow = false"
      />
    </form>
    <!-- 搜索结果 -->
    <result v-if="isresultshow" :keywords="keywords"></result>
    <!-- 推荐内容 -->
    <advise
      :keywords="keywords"
      v-else-if="keywords"
      @search="onSearch($event)"
    ></advise>
    <!-- 搜索历史 -->
    <history v-else></history>
  </div>
</template>

<script>
import Advise from './components/advise.vue'
import result from './components/result.vue'
import history from './components/history.vue'
export default {
  // 定义属性
  data() {
    return {
      keywords: '', // 搜索框内容
      isresultshow: false // 是否显示搜索结果
    }
  },
  components: {
    Advise,
    result,
    history
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //取消事件
    onCancel() {
      this.$router.back()
    },
    //搜索事件
    onSearch(val) {
      // 点击搜索建议，将搜索建议返回到搜索框中
      if (val) {
        this.keywords = val
      }
      // 开始进行搜索
      this.isresultshow = true
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang="less">
.blank{
  height: 96px;
  width: 100%;
}
.search-container {
  .van-search {
    padding: 20px 34px;
    height: 96px;
    position: fixed;
    top:0;
    width:100%;
  }
  .van-search__action {
    font-family: MicrosoftYaHei;
    font-size: 28px;

    letter-spacing: 1px;
    color: #ffffff;
  }
}
</style>
